<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title th:text="${title}"></title>
    <link th:href="@{${basePath}+'/static/plugins/layui/css/layui.css'}" rel="stylesheet" media="all">
    <link th:href="@{${basePath}+'/static/plugins/layui/css/font-iconpicker.min.css'}" rel="stylesheet"/>
    <link th:href="@{${basePath}+'/static/plugins/layui/css/font-awesome.min.css'}" rel="stylesheet"/>
    <link th:href="@{${basePath}+'/static/plugins/layui/css/layui.admin.css'}" rel="stylesheet"/>
</head>
<body>
<span th:fragment="javascript">
		<script th:src="@{${basePath}+'/static/plugins/layui/layui.all.js'}" charset="utf-8"></script>
		<script th:inline="javascript" charset="utf-8">
		
			//全局路径
            var basePath = /*[[${basePath}]]*/;

            layui.config({
                base: basePath + '/static/plugins/layui/lay/modules/'
            }).extend({
                treetable: 'treetable',
                treeselect: 'treeselect',
                fontSelect: 'fontSelect'
            });

            //实现iframe中session过期后跳转到登录页
            (function (_basePath) {
                if ((self.location.href == _basePath || self.location.href == _basePath + "/login") && (self.location.href != parent.location.href)) {
                    parent.location.href = _basePath;
                }
            })(basePath);

            //ajax请求后session过期
            layui.jquery(document).ajaxComplete(function (event, request, settings) {
                if (request.status != null && request.status == 500) {
                    parent.location.href = basePath;
                }
            });

            //定义搜索框函数
            var search = {

                data: {},

                //执行重载
                reload: function (tableId, data) {
                    layui.table.reload(tableId, {page: {curr: 1}, where: data});
                },

                //构造树型结构数据
                tree: function (data, parentCode, callback) {
                    var _nodes = [];
                    for (var i = 0; i < data.length; i++) {
                        var _node = data[i];
                        if (_node.parentCode == parentCode) {
                            var childrens = {
                                id: _node.id,
                                code: _node.code,
                                parentCode: _node.parentCode,
                                name: _node.name,
                                children: search.tree(data, _node.code)
                            }
                            _nodes.push(childrens);
                        }
                    }
                    if (callback && callback instanceof Function) {
                        callback(_nodes);
                    }
                    return _nodes;
                },

                //初始化时间控件
                laydate: function (start_elem, end_elem) {
                    var start_date = layui.laydate.render({
                        elem: start_elem, type: "datetime",
                        done: function (value, date, endDate) {
                            date.month = date.month !== 1 ? date.month - 1 : (date.year--, 12);
                            end_date.config.min = date;
                            end_date.config.value = date;
                        }
                    });
                    var end_date = layui.laydate.render({
                        elem: end_elem, type: "datetime", min: 0,
                        done: function (value, date, endDate) {
                            date.month = date.month !== 1 ? date.month - 1 : (date.year--, 12);
                            start_date.config.max = date;
                        }
                    });
                },

                //初始化上传控件
                upload: function (_url, _callback) {
                    var upload_form = layui.jquery("#upload-file-comm").html();
                    var index_upload = layer.open({
                        title: '文件导入',
                        btn: [],
                        area: ['600px', '400px'],
                        content: layui.jquery(upload_form).html()
                    });
                    var link_upload = layui.upload.render({
                        elem: '#upload_file', url: basePath + _url, auto: false,
                        accept: 'file', exts: 'xls|xlsx|csv|txt', method: 'POST', bindAction: '#link_upload_submit',

                        choose: function (obj) {
                            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                            obj.preview(function (index, file, result) {
                                var tr = layui.jquery(['<tr id="upload-file-' + index + '">'
                                    , '<td>' + file.name + '</td>'
                                    , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                                    , '<td>等待上传</td>'
                                    , '<td>'
                                    , '<button class="layui-btn layui-btn-xs layui-hide  link-upload-reload">重新上传</button>'
                                    , '<button class="layui-btn layui-btn-xs layui-btn-danger link-upload-delete">立即删除</button>'
                                    , '</td>'
                                    , '</tr>'].join(''));

                                //绑定单个文件重新上传事件
                                tr.find('.link-upload-reload').on('click', function () {
                                    obj.upload(index, file);
                                });

                                //绑定单个文件立即删除事件
                                tr.find('.link-upload-delete').on('click', function () {
                                    delete files[index]; //删除对应的文件
                                    tr.remove();
                                    link_upload.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                });

                                //追加数据操作
                                layui.jquery(".link_upload_list").append(tr);
                            });
                        },

                        done: function (res, index, upload) {
                            if (_callback && _callback instanceof Function === true) {
                                _callback(res);
                            }
                            layui.jquery("button[lay-filter='reload']").click();
                            if (res.code == 1) {
                                var tr = layui.jquery(".link_upload_list").find('tr#upload-file-' + index),
                                    tds = tr.children();
                                tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                                tds.eq(3).html('');
                                return delete this.files[index];
                            }
                            this.error(index, upload);
                        },

                        error: function (index, upload) {
                            var tr = layui.jquery(".link_upload_list").find('tr#upload-file-' + index),
                                tds = tr.children();
                            tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                            tds.eq(3).find('.link-upload-reload').removeClass('layui-hide');
                        }
                    });

                    //监听上传操作
                    layui.form.on('submit(import)', function (data) {
                        link_upload.config.data = data.field;
                        layui.jquery("#link_upload_submit").click();
                        return false;
                    });
                    return false;
                },

                //初始化新增控件
                insert: function (_title, _url, _data, _callback) {

                    //构建表单相关属性
                    layui.laytpl(layui.jquery("#build-form-comm").html()).render(_data, function (_html) {

                        //构建弹窗信息
                        var index_upload = layer.open({
                            title: _title,
                            btn: [],
                            area: ['800px', ((_data.column.length - (_data.hidden ? _data.hidden : 0)) * 120) + 'px'],
                            content: _html,
                            success: function (layero, index) {

                                //解决Layui会对select、checkbox、radio等原始元素隐藏
                                layui.form.render();

                                //如果当前模板渲染成功后，需要执行一些操作,请添加该方法
                                if (_data.done && _data.done instanceof Function === true) {
                                    _data.done();
                                }

                                //解决Layui会对select、checkbox、radio等原始元素隐藏
                                layui.form.render();
                            }
                        });

                        //监听提交操作
                        layui.form.on('submit(' + _data.button.filter + ')', function (data) {

                            //如果存在提交前对数据操作，请添加该方法
                            if (_data.submit && _data.submit instanceof Function === true) {
                                data = _data.submit(data);
                            }

                            //请求后台，提交数据，执行成功后执行回调方法
                            layui.$.ajax({
                                url: basePath + _url, data: data.field, type: 'POST',
                                beforeSend: function () {
                                    index = layer.load(2, {shade: [0.8, '#FFFFFF'], shadeClose: true});
                                },
                                success: function (result) {
                                    layui.layer.close(index);
                                    if (_callback && _callback instanceof Function === true) {
                                        _callback(result, function () {
                                            layui.jquery("button[lay-filter='reload']").click()
                                        });
                                    }
                                }
                            })
                            return false;
                        });
                    });
                },

                //初始化详情控件
                view: function (_title, _filter, _data, _callback) {

                    //将数据存储在toolbar对象域上
                    var toolbar = layui.laytpl(layui.jquery("#table-view-comm").html()).render(_data);

                    //监听工具条操作
                    layui.table.on('tool(' + _filter + ')', function (result) {

                        //获取当前数据
                        _data.data = JSON.parse(unescape(layui.jquery(this).attr("val")));

                        //构建表单相关属性
                        layui.laytpl(layui.jquery("#build-table-comm").clone(true).html()).render(_data, function (_html) {

                            //计算弹窗宽度、高度
                            var width = 100, height = 280;
                            layui.each(_data.cols[0], function (index, item) {
                                width += item.width;
                            })
                            height = (_data.data.length + 1) * 50 > height ? (_data.data.length + 1) * 50 : height;

                            //构建弹窗信息
                            var index_upload = layer.open({
                                title: _title, btn: [], area: [width + "px", height + 'px'], content: _html,
                                success: function (layero, index) {

                                    const __data = _data;

                                    __data.elem = "#" + __data.id;

                                    if (__data.data.length > 10) {
                                        __data.page = true;
                                    }

                                    layui.table.render(__data);
                                }
                            });
                        });
                    });

                    return toolbar;
                }
            }
		</script>

    <!-- 构建上传组件 -->
		<script th:inline="javascript" charset="utf-8" type="text/html" id="upload-file-comm">
		 		<form class="layui-form layui-form-pane" id="upload-form" action="javascript:void(0)">
			 		<div class="layui-form-item">
			 			<div class="layui-input-inline">
			 				<div class="layui-upload-drag" id="upload_file" style="width:500px">
			 					 <i class="layui-icon"></i>
			 					 <p>点击上传，或将文件拖拽到此处</p>
			 				</div>
			 			</div>
			 		</div>
			 		<div class="layui-form-item">
			 			<div class="layui-upload-list" style="margin-top:10px;width:564px">
			 				  <table class="layui-table">
			 					    <thead>
			 					        <tr>
			 						        <th>文件名</th>
			 						        <th>大小</th>
			 						        <th>状态</th>
			 						        <th>操作</th>
			 					      	</tr>
			 					    </thead>
			 					    <tbody class="link_upload_list"></tbody>
			 				  </table>
			 			</div>
			 		</div>
			 		<div class="layui-form-item">
			 			<div class="layui-input-inline" style="text-align:center;width:564px">
							<button class="layui-btn" data-method="import" lay-submit lay-filter="import">立即上传</button>
			 				<button class="layui-btn layui-hide" id="link_upload_submit"></button>
			 			</div>
			 		</div>
		 		</form>
	    </script>

    <!-- 构建表单组件 -->
	    <script th:inline="javascript" charset="utf-8" type="text/html" id="build-form-comm">
			    <form class="layui-form layui-form-pane" action="javascript:void(0)">
					{{#  layui.each(d.column, function(index, item){ }}
						<div class="layui-form-item" style="{{item.type === " hidden"?'display:none':'display:block'}}">
							
							{{#  if(item.lable){ }}
										<label class="layui-form-label"> {{item.lable}} </label>
							{{#  } }}

							<div class="layui-input-block">

							{{#  if(item.type === "input"){ }}
						    	<input class="layui-input" type="text" id="{{item.id?item.id:'' }}"
                                       name="{{ item.name?item.name:'' }}" value="{{item.value?item.value:''}}"
                                       lay-verify="{{item.verify?item.verify:''}}"
                                       placeholder="{{item.tips?item.tips:''}}" {{ item.readonly?'readonly':'' }} autocomplete="off">
							{{#  } }}

							{{#  if(item.type === "hidden"){ }}
						    	<input class="layui-input" type="hidden" id="{{item.id?item.id:'' }}"
                                       name="{{ item.name?item.name:'' }}" value="{{item.value?item.value:''}}"
                                       lay-verify="{{item.verify?item.verify:''}}"
                                       placeholder="{{item.tips?item.tips:''}}" {{ item.readonly?'readonly':'' }} autocomplete="off">
							{{#  } }}

							{{#  if(item.type === "table"){ }}
						    	<table class="layui-hide" id="{{item.id?item.id:'' }}"
                                       lay-filter="{{item.filter?item.filter:''}}"></table>
							{{#  } }}
  
							{{#
								 if( item.done && item.done instanceof Function){
									 item.done();
							     }
							}} 

							</div>
                    </div>
                    {{#  }); }}
					<div class="layui-form-item">
						<div class="layui-input-block" style="text-align:center;margin:0px 150px">
							<button class="layui-btn layui-btn-fluid" data-method="{{d.button.method}}" lay-submit
                                    lay-filter="{{d.button.filter}}">{{d.button.text}}</button>
						</div>
					</div>
				</form>
	    </script>

    <!-- 构建表格组件 -->
	    <script th:inline="javascript" charset="utf-8" type="text/html" id="build-table-comm">
			    <table class="layui-table" id="{{d.id}}" lay-filter="{{d.filter}}"></table>
	    </script>

    <!-- 构建表格按钮 -->
	    <script th:inline="javascript" charset="utf-8" type="text/html" id="table-bar-comm">
  				<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="open">开启</a>
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="close">关闭</a>
		</script>

    <!-- 构建表单显示 -->
		<script th:inline="javascript" charset="utf-8" type="text/html" id="table-check-comm">
				<input type="checkbox" name="status" title="开启" lay-filter="table-check-lock" {{ d.status== 0
                       ? 'checked' : '' }}>
		</script>

    <!-- 构建详情按钮 -->
	    <script th:inline="javascript" charset="utf-8" type="text/html" id="table-view-comm">
  				<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"
                   val="{{escape(JSON.stringify(d.data))}}">查看详情</a>
		</script>
		
	</span>
</body>
</html>